FalkenDev / SparkRentals-Mobile-App

export default function Map({navigation, API_KEY, position, setPosition, token}): any {

    const [locationMarker, setLocationMarker] = useState(null);

    const [currentCity, setCurrentCity] = useState(null);

    const [zones, setZones] = useState([]);

    const [scooters, setScooters] = useState([]);

    const [currentScooter, setCurrentScooter] = useState(null);

    const [modalVisible, setModalVisible] = useState(false);

    const [zoneModalVisible, setZoneModalVisible] = useState(false);

    const [currentZone, setCurrentZone] = useState(null);

    const [cameraVisible, setCameraVisible] = useState(false);

    const [journeyModal, setJourneyModal] = useState(false);

    const [toggleTimer, setToggleTimer] = useState(false);

    const [markerSelected, setMarkerSelected] = useState(null);

    /**

     * Set user position

     */

    useEffect(() => {

        async function fetchPosition(): Promise<void> {

            const { status } = await Location.requestForegroundPermissionsAsync();

            // if (status !== 'granted') {

            //     setErrorMessage('Permission to access location was denied');

            //     return;

            // }

            const currentLocation = await Location.getCurrentPositionAsync({});

            const userCoordinates = {

                //latlang hardcoded for testing

                latitude: currentLocation.coords.latitude,

                longitude: currentLocation.coords.longitude

                // latitude: 56.161013580817986,

                // longitude: 15.587742977884904

            };

            setPosition(userCoordinates);

            mapModel.getClosestCity(position);

            setLocationMarker(<Marker

                coordinate={{

                    //latlang hardcoded for testing

                    // latitude: currentLocation.coords.latitude,

                    // longitude: currentLocation.coords.longitude

                    latitude: 56.161013580817986,

                    longitude: 15.587742977884904

                }}

                title="My location"

                pinColor="blue"

                flat={false}

            />);

        };

        fetchPosition();

    }, []);

    /**

     * Set city to city that is closest to user and zones for that city

     */

    useEffect(() => {

        async function setUpMap(): Promise<void> {

            const city = await mapModel.getClosestCity(position);

            // Set city that is closest to user

            setCurrentCity(city);

            /**

             * Set zones on map

             */

            const zones = mapModel.getZones(city);

            setZones(zones);

        };

        setUpMap();

    }, []);

    /**

     * Get scooters for current city,

     * Updated every 5 seconds

     */

    useEffect(() => {

        const interval = setInterval(() => {

            // Get scooters

            async function getScooters() {

                const city = await mapModel.getClosestCity(position);

                const result = await scooterModel.getScooters(city); 

                if (result) {

                    const scooters = result['cityScooters'];

                    const sortedScooters = scooterModel.sortAvailableScooters(scooters);

                    setScooters(sortedScooters);

                };

            };

            getScooters();

        }, 5000);

        return () => clearInterval(interval);

      }, []);

    return (

        <View style={styles.container}>

            <MapView

                style={styles.map}

                initialRegion={{

                    latitude: position.latitude? position.latitude : 56.161013580817986,

                    longitude: position.longitude? position.longitude : 15.587742977884904,

                    latitudeDelta: 0.03,

                    longitudeDelta: 0.03,

                }}

                userInterfaceStyle={'dark'}

            >

                {locationMarker}

                {scooters.map((s, index) => 

                    <Marker

                        coordinate={s['coordinates']}

                        icon={markerIcon(index, markerSelected)}

                        tappable={true}

                        key={index}

                        onPress={() => {

                            setCurrentScooter(s);

                            setModalVisible(true);

                            setMarkerSelected(index);                            

                        }}

                        >

                    </Marker>

                )}

                {zones.map((z, index) => (                    

                    <Polygon 

                        coordinates={z['coordinates']}

                        strokeColor={z['zoneColor']}

                        strokeWidth={3}

                        fillColor={z['zoneColor']}

                        key={index}

                        tappable={true}

                        onPress={() => {

                            setCurrentZone(z)

                            setZoneModalVisible(true)                            

                        }}

                    />

                ))}

            </MapView>

            <ScooterModal navigation={navigation} scooter={currentScooter} modalVisible={modalVisible} currentCity={currentCity} setModalVisible={setModalVisible} setJourneyModal={setJourneyModal} setToggleTimer={setToggleTimer} position={position}/> 

            <ZoneModal navigation={navigation} zone={currentZone} zoneModalVisible={zoneModalVisible} setZoneModalVisible={setZoneModalVisible} currentCity={currentCity}/>

            <JourneyModal navigation={navigation} scooter={currentScooter} journeyModal={journeyModal} setJourneyModal={setJourneyModal} toggleTimer={toggleTimer} setToggleTimer={setToggleTimer}/>

            <Pressable onPress={() => {setCameraVisible(true)}} style={styles.googleLogin}>

                    <Icon 

                        name='screen-full' 

                        size={15} 

                        color='white'

                    />

                    <Text style={styles.googleText}>Scan to unlock</Text>

            </Pressable>

            <NavBar navigation={navigation} />

            <QrScanner navigation={navigation} cameraVisible={cameraVisible} setCameraVisible={setCameraVisible} scooter={currentScooter} setModalVisible={setModalVisible} currentCity={currentCity} setCurrentScooter={setCurrentScooter}/>

        </View>